<template>
	<view class="forget_pass">
		<ul class="user_list">
			<li class="user_item">
				<image src="../../static/image/phone@2x.png" mode=""></image>
				<input v-model="phone" type="text" placeholder="填写手机号">
			</li>

			<li class="user_item">
				<image src="../../static/image/ver@2x.png" mode=""></image>
				<input v-model="code" type="text" placeholder="手机验证码">
				<span @click="ObtainYzm">{{countdown}}</span>
			</li>

			<li class="user_item">
				<image src="../../static/image/pass@2x.png" mode=""></image>
				<input v-model="password" type="text" placeholder="6-20位登录密码">
			</li>

			<li class="user_item">
				<image src="../../static/image/pass@2x.png" mode=""></image>
				<input v-model="passwordConfirm" type="text" placeholder="确认密码">
			</li>
		</ul>
		<div class="confirm" @click="resetPass">
			确认
		</div>
	</view>
</template>

<script>
	import {
		throtTling
	} from '../../utils/throttling.js'
	export default {
		data() {
			return {
				countdown: '验证码',
				times: '',
				phone: '',
				code: '',
				password: '',
				passwordConfirm: ''
			};
		},
		methods: {
			resetPass: throtTling(function() {
				let data = {
					phone: this.phone,
					code: this.code,
					password: this.password,
					password_confirm: this.passwordConfirm
				}
				this.$http({
					url: '/wxapi/UserApi/forgetPassword',
					method: 'POST',
					data: data
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							// 删除本地token
							uni.removeStorage({
								key: 'token',
								success: function(res) {
									uni.navigateTo({
										url: '../login/Login'
									});
								}
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}, 1000),

			ObtainYzm: throtTling(function() {
				let that = this
				if (that.countdown == '验证码') {
					that.$http({
						url: '/wxapi/UserApi/sendMsgCode',
						method: 'POST',
						data: {
							phone: that.phone
						}
					}).then(res => {
						if (res.code == 200) {
							that.countdown = 60
							console.log(typeof(that.countdown))
							that.times = setInterval(() => {
								if (that.countdown == 0) {
									clearInterval(that.times)
									that.countdown = '验证码'
								} else {
									that.countdown--
								}
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
				return
				this.$http({
					url: '/wxapi/UserApi/sendMsgCode',
					method: 'POST',
					data: {
						phone: that.phone
					}
				}).then(res => {
					if (res.code == 200) {} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}, 1000)
		}
	}
</script>

<style lang="less" scoped>
	.forget_pass {
		height: 100%;

		.user_list {
			margin: 0 60rpx;

			.user_item {
				padding: 20rpx 0;
				display: flex;
				height: 85rpx;
				border-bottom: 2rpx solid #D9E1E9;

				image {
					margin: auto 0;
					width: 50rpx;
					height: 50rpx;
				}

				input {
					padding-left: 40rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #B5C1CD;
					flex: 1;
				}

				span {
					margin: auto 0;
					width: 156rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					font-size: 24rpx;
					color: #2595FF;
					border-radius: 23rpx;
					background-color: #f0f6fd;
				}

			}
		}

		.confirm {
			margin: 120rpx 30rpx 0 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
			background-color: #2595FF;
			border-radius: 45rpx;
		}
	}
</style>
